<template>
  <div class="app-container"  v-loading="loading">
    <el-form :inline="true" :model="queryParams" >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item >
            <el-input v-model="queryParams.attrName" placeholder="规格名称" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item >
            <el-button icon="Search" type="primary" @click="clickSearch">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>
    <div>
      <el-button  type="primary" @click="clickAdd" v-hasPermi="['commodity:attr:save']">新建属性</el-button>
      <el-button  type="danger" @click="batchDelete" v-hasPermi="['commodity:attr:delete']">删除所选</el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        show-overflow
        :row-config="{isCurrent: true, isHover: true}"
        style="margin-top: 10px;"
        align="center"
        :data="tableData"
        :height="tableHeight"
        :checkbox-config="{ trigger:'row'}">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="60" title="序号" tree-node ></vxe-column>
      <vxe-column field="attrName" title="规格名称"></vxe-column>
      <vxe-column field="rule" title="规格值"></vxe-column>
      <vxe-column field="companyName"   title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName"  title="仓库名称" ></vxe-column>
      <vxe-column fixed="right"  width="200" title="操作">
        <template #default="{row}">
          <el-button type="text" @click="clickEdit(row)" v-hasPermi="['commodity:attr:save']">编辑</el-button>
          <el-button type="text" style="color:red"  @click="handleDelete(row)" v-hasPermi="['commodity:attr:delete']">删除  </el-button>
        </template>
      </vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <EditAttribute  :isShowDialog="isShowDialog" v-if="isShowDialog" :title="title" :rowData="rowData"
                  @cancel="handleClose" ></EditAttribute>

  </div>

</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {getSkuAttrDelete, getSkuAttrList} from "@/api/scApi";
import EditAttribute from "@/views/commodity/commodityAttribute/componet/editAttribute.vue";


const { proxy } = getCurrentInstance()
const queryParams = ref({
  pageNum:1,
  pageSize:10,
  startTime:'',
  endTime:''
})
let total=ref(1)
let title=ref("")
let rowData=ref({})
let loading=ref(false)
const clickSearch = () => {
  getList();
};

const resetQuery = () => {
  queryParams.value={
    pageNum: 1,
    pageSize: 10,
    startTime:'',
    endTime:''
  }
  getList();
};

function getList(){
  loading.value=true
  getSkuAttrList({
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }).then(res => {
    loading.value=false
    tableData.value = res.data
    total.value = res.total
  }).finally(()=>{
    loading.value = false
  })
}

onMounted(()=>{
  getList()
})

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 350;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 350;
}

let tableData  = ref([ ])

let isShowDialog=ref(false)

function clickAdd(){
  rowData.value ={}
  title.value='新建属性'
  isShowDialog.value=true
}

function clickEdit(row){
  title.value = "编辑属性";
  rowData.value=row
  if(typeof  rowData.value.rule ==='string'){
    rowData.value.rule= rowData.value.rule.split(",")
  }
  isShowDialog.value=true
}

function handleDelete(row){
  deleteData([row.attrId])
}
function deleteData(ids) {
  if (!ids || ids.length === 0) {
    return
  }
  proxy.$modal.confirm('是否确认删除该数据？').then(() => {
    getSkuAttrDelete({ids: ids}).then(res => {
      if (res.code === 200) {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }
    })
  }).catch(() => {
  });
}

//删除所选
function batchDelete() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    let ids = selectRecords.map(item => item.attrId)
    deleteData(ids)
  }
}

function handleClose(isReload) {
  isShowDialog.value = false
  if (isReload) {
    getList()
  }
}
</script>

<style scoped lang="scss">
.el-form-item{
  width: 90%;
}
</style>